<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <span style="font-weight: bold; font-size: 28px">模型导入任务详情 —— {{taskName}}</span>
    </mat-card>
    <mat-card>
        <div>
            ①提取模型文件
            <a (click)="toggleViewDetailExtractModelFile()" *ngIf="detailExtractModelFile && viewDetailExtractModelFile">
                <span class="fa fa-minus-square" style="color: #673ab7"></span>
            </a>
            <a (click)="toggleViewDetailExtractModelFile()" *ngIf="detailExtractModelFile && !viewDetailExtractModelFile">
                <span class="fa fa-plus-square" style="color: #673ab7"></span>
            </a>
        </div>
        <div style="margin: 20px 20px 0 20px">
            <mat-progress-bar mode="determinate" [value]="progressExtractModelFile" color="primary" *ngIf="statusExtractModelFile !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressExtractModelFile" color="warn" *ngIf="statusExtractModelFile === '失败'"></mat-progress-bar>
        </div>
        <pre style="margin: 20px 20px 0 20px; font-size: small" *ngIf="viewDetailExtractModelFile">{{detailExtractModelFile}}</pre>
    </mat-card>
    <mat-card *ngIf="statusExtractModelFile === '成功'">
        <div>
            ②创建模型对象
            <a (click)="toggleViewDetailCreateSolution()" *ngIf="detailCreateSolution && viewDetailCreateSolution">
                <span class="fa fa-minus-square" style="color: #673ab7"></span>
            </a>
            <a (click)="toggleViewDetailCreateSolution()" *ngIf="detailCreateSolution && !viewDetailCreateSolution">
                <span class="fa fa-plus-square" style="color: #673ab7"></span>
            </a>
        </div>
        <div style="margin: 20px 20px 0 20px">
            <mat-progress-bar mode="determinate" [value]="progressCreateSolution" color="primary" *ngIf="statusCreateSolution !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressCreateSolution" color="warn" *ngIf="statusCreateSolution === '失败'"></mat-progress-bar>
        </div>
        <pre style="margin: 20px 20px 0 20px; font-size: small" *ngIf="viewDetailCreateSolution">{{detailCreateSolution}}</pre>
    </mat-card>
    <mat-card *ngIf="statusCreateSolution === '成功'">
        <div>
            ③添加artifact
            <a (click)="toggleViewDetailAddArtifact()" *ngIf="detailAddArtifact && viewDetailAddArtifact">
                <span class="fa fa-minus-square" style="color: #673ab7"></span>
            </a>
            <a (click)="toggleViewDetailAddArtifact()" *ngIf="detailAddArtifact && !viewDetailAddArtifact">
                <span class="fa fa-plus-square" style="color: #673ab7"></span>
            </a>
        </div>
        <div style="margin: 20px 20px 0 20px">
            <mat-progress-bar mode="determinate" [value]="progressAddArtifact" color="primary" *ngIf="statusAddArtifact !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressAddArtifact" color="warn" *ngIf="statusAddArtifact === '失败'"></mat-progress-bar>
        </div>
        <pre style="margin: 20px 20px 0 20px; font-size: small" *ngIf="viewDetailAddArtifact">{{detailAddArtifact}}</pre>
    </mat-card>
    <mat-card *ngIf="statusAddArtifact === '成功'">
        <div>
            ④生成TOSCA文件
            <a (click)="toggleViewDetailCreateTosca()" *ngIf="detailCreateTosca && viewDetailCreateTosca">
                <span class="fa fa-minus-square" style="color: #673ab7"></span>
            </a>
            <a (click)="toggleViewDetailCreateTosca()" *ngIf="detailCreateTosca && !viewDetailCreateTosca">
                <span class="fa fa-plus-square" style="color: #673ab7"></span>
            </a>
        </div>
        <div style="margin: 20px 20px 0 20px">
            <mat-progress-bar mode="determinate" [value]="progressCreateTosca" color="primary" *ngIf="statusCreateTosca !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressCreateTosca" color="warn" *ngIf="statusCreateTosca === '失败'"></mat-progress-bar>
        </div>
        <pre style="margin: 20px 20px 0 20px; font-size: small" *ngIf="viewDetailCreateTosca">{{detailCreateTosca}}</pre>
    </mat-card>
    <mat-card *ngIf="statusCreateTosca === '成功'">
        <div>
            ⑤创建微服务
            <a (click)="toggleViewDetailGenerateMicroService()" *ngIf="detailGenerateMicroService && viewDetailGenerateMicroService">
                <span class="fa fa-minus-square" style="color: #673ab7"></span>
            </a>
            <a (click)="toggleViewDetailGenerateMicroService()" *ngIf="detailGenerateMicroService && !viewDetailGenerateMicroService">
                <span class="fa fa-plus-square" style="color: #673ab7"></span>
            </a>
        </div>
        <div style="margin: 20px 20px 0 20px">
            <mat-progress-bar mode="determinate" [value]="progressGenerateMicroService" color="primary" *ngIf="statusGenerateMicroService !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressGenerateMicroService" color="warn" *ngIf="statusGenerateMicroService === '失败'"></mat-progress-bar>
        </div>
        <pre style="margin: 20px 20px 0 20px; font-size: small" *ngIf="viewDetailGenerateMicroService">{{detailGenerateMicroService}}</pre>
    </mat-card>
    <mat-card *ngIf="getCompleteSuccess() || getCompleteFail()">
        <div class="row justify-content-center">
            <div *ngIf="getCompleteSuccess()">
                <span class="alert alert-success" style="font-size: 18px">
                    模型导入成功！
                </span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <button (click)="gotoMyModel()">查看模型</button>
            </div>
            <h4 class="alert alert-danger" *ngIf="getCompleteFail()">
                模型导入失败！
            </h4>
        </div>
    </mat-card>
    <br><br>
</div>

